<template>
	<view class="main" ref="main" :class="{overflow:is_preposition || is_share}">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top handler">
			<!-- <view class="scan"><image src="/static/img/scan_1.png" /></view> -->
			<view class="input" @click="go_goodsearch">
				<image src="/static/img/find_1.png" />
				输入关键字搜索海量商品
			</view>
			<view class="msg" @click="go_message()">
				<image src="/static/img/information_1.png" />
				<text v-if="news_l && news_l != 0">{{ news_l }}</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="mpoffset" v-bind:style="{ width: MPtop + 'px' }"></view>
			<!-- #endif -->
		</view>
		<view class="banner" v-if="banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" :circular="true"
			 style="height: 375rpx;">
				<swiper-item v-for="(items, index) in banner" :key="index" @click="go(items.bannerUrl)">
					<image style="width: 100%;height: 375rpx;" :src="items.image" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="icon">
				<image src="/static/img/information_2.png" />
			</view>
			<view class="nr">
				<swiper class="swiper" :vertical="true" :autoplay="true" :interval="5000" :duration="500" :circular="true" style="height: 40rpx;">
					<swiper-item v-for="(items, index) in notices" :key="index" @click="notice(items.id)">{{ items.title }}:{{ items.subTitle }}</swiper-item>
				</swiper>
			</view>
		</view>
		
		<swiper class="swiperheight"  :class="{swiper:menu[0].length>1}" :indicator-dots="false" :autoplay="false" v-if="menu[0]">
			<swiper-item v-for="(item, index) in menu" :key="index">
				<view class="menu-bar">
					<view v-for="item in menu[index]" :key="item.value" @click="subsite(item)" class="menu">
						<image :src="item.image" />
						<view>
							{{ item.text }}
							<br />
							<text>{{ item.siteName }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="product-list">
			<view class="title">
				<image src="/static/img/hot_1.png" />
				热销商品
				<text class="more right" @click="go_goods()">更多>></text>
			</view>
			<view class="list" v-show="commodity">
				<view class="commodity" v-for="(item, index) in commodity" :key="item.value" v-if="index < 2">
					<image :src="item.image" class="picture" mode="aspectFill" @click="go_good(item.id)" />
					<p class="name">{{ item.goodsName }}</p>
					<view class="price">
						￥{{ item.marketPrice }}
						<image src="/static/img/car_1.png" class="shopping" @click="getshopDate(item.id)" v-if="issee"/>
					</view>
				</view>
			</view>
		</view>
		<view class="news" v-show="news">
			<view class="title">
				<image src="/static/img/new.png" mode="widthFix" />
				新闻资讯
				<text class="more right" @click="go_morenews(2)">更多>></text>
			</view>
			<scroll-view :scroll-left="0" scroll-x="true" class="list">
				<view v-for="item in news" :key="item.index" @click="go_news(item)" class="new-list">
					<image :src="item.image" />
					<view>{{ item.title }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop">
			<image src="/static/img/go_top.png" />
		</view>
		<transition name="fade">
			<view class="ceng" v-show="is_preposition || is_share" @click="ceng"></view>
		</transition>
		<view class="preposition" v-show="is_preposition">
			<view class="intro" >
				<view class="img">
					<image :src="productImg" mode="aspectFill" />
				</view>
				<view class="text">
					<view class="name">{{goodDetail.goodsName }}</view>
					<view class="price" v-if="goodDetail.skus">￥{{ disPrice }}</view>
					
				</view>
				<view class="close" @click="ceng">
					×
				</view>
			</view>
			<view class="parameter">
				<view class="name">
					选择颜色/尺码
					<i class="cubeic-arrow right"></i>
				</view>
			
				<view class="ul" v-if="shop_details[0]">
					<view class="flex">
						<view class="li" v-for="(item, index1) in shop_details[0].sublevel" :key="index1" :class="{ active:index1 == indexs}"
						 @click="checkeds(item, index1)">
							{{ item }}
						</view>
					</view>
					<view class="flex">
						<view class="li" v-for="(item, index) in shop_details[0].size" :key="index" :class="{ active: index == idx}"
						 @click="checkcolor(item, index)">
							{{ item }}
						</view>
					</view>
			
				</view>
			
			</view>
			<view class="button" @click="sub()">确 定</view>
		</view>
	</view>
</template>

<script>
	// TODO 修复android v3 加载过慢问题
	// // #ifdef aPP-PLUS
	// var domModule = weex.requireModule('dom');
	// domModule.addRule('fontFace', {
	// 	fontFamily: 'uniicons',
	// 	src: "url('/static/uni.ttf')"
	// });
	// // #endif
	import {uniIcons} from '@dcloudio/uni-ui'
	import goodDetails from '../../servers/commodity/particulars.js';
	import shop from '../../servers/shop/index.js';
	export default {
		components: {
			uniIcons
		},
		props: ['paging'],
		data() {
			return {
				login: '',
				news_l: 0,
				is_go_top: false,
				banner: [],
				num:'',
				menu: [],
				commodity: [],
				notices: [],
				news: [],
				is_preposition: 0,
				goodDetail: [],
				goodImag: [],
				productImg: '',
				disPrice:'',
				checked:'',
				checked1:'',
				idx: 0,
				indexs: 0,
				shop_details: [],
				// #ifdef MP-WEIXIN
				MPtop: '',
				// #endif
				is_share: false,
				issee:true
			};
		},
		mounted() {
			// uni.clearStorage();
			this.login = uni.getStorageSync('login');
			if(uni.getStorageSync('mr')=='a'){
				this.issee=false
			}
			if (this.$jwx.isWechat()) {
				this.$jwx.initJssdk()
			}
			// #ifdef MP-WEIXIN
			this.MPtop = (wx.getSystemInfoSync().screenWidth - wx.getMenuButtonBoundingClientRect().left) * 2;
			// #endif
		},
		
		onPullDownRefresh() {
			var _this=this;
		      uni.startPullDownRefresh({
		      	success() {
					_this.getDate();

					uni.stopPullDownRefresh();	
		      	}
		      })  
		    },
		onPageScroll: function(e) {
			//nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) {
				this.is_go_top = true;
			} else {
				this.is_go_top = false;
			}
		},
		onShow: function(e) {
			uni.removeStorageSync('actId');
			uni.removeStorageSync('subsite');
			this.login = uni.getStorageSync('login');
			console.log(uni.getStorageSync('mr'),this.issee)
			if(uni.getStorageSync('mr')=='a'){
				this.issee=false
				console.log(this.issee)
			}else{
				this.issee=true
			}
			
			
			// #ifdef MP-WEIXIN
			this.MPtop = (wx.getSystemInfoSync().screenWidth - wx.getMenuButtonBoundingClientRect().left) * 2;
			// #endif

		},
		onLoad() {
			var _this = this;
			uni.getNetworkType({
				success: function(res) {
					if (res.networkType == 'none') {
						uni.showToast({
							title: '网络不给力，请检查您的网络',
							icon: 'none'
						})
						uni.onNetworkStatusChange(function(res) {
			
							if (res.isConnected) {
			
								_this.getDate();
							}
						});
					} else {
						_this.getDate();
						
					}
				}
			});
			
		},
		methods: {
			// 请求数据
			getDate() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				shop.banner({
						bannerLoc: 1
					})
					.then(res => {
						this.banner = res.data.map(v => {
							v.image = this.imgCDNUrl + v.bannerImg;
							return v;
						});
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
					shop.subsite()
						.then(res => {
							this.num = Math.ceil(res.data.length / 4);
							this.menu=res.data.map(v=>{
								v.image=this.imgCDNUrl + v.siteCover
								return v;
							});
							 var arr=[];
							
							for (var i = 0, j = res.data.length; i < j; i += 4) {
							    arr.push(res.data.slice(i, i + 4));
							}
							this.menu=arr
							 uni.hideLoading();
						
						})
						.catch(err => {
							console.log(new Error('请检查网络后重试'));
						});
				shop.news(2)
					.then(res => {
						console.log(res.data);
						this.news = res.data.records.map(v => {
							v.image = this.imgCDNUrl + v.img;
							return v;
						});
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});

				shop.news(1)
					.then(res => {
						this.notices = res.data.records;
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});

				shop.commodity()
					.then(res => {
						this.commodity = res.data.records.map(v => {
							v.image = this.imgCDNUrl + v.goodsImg;
							return v;
						});
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});

				
				if (this.login) {
					shop.noReadMessage()
						.then(res => {
							this.news_l = res.data;
						})
						.catch(err => {
							console.log(new Error('请检查网络后重试'));
						});
				}
			},
			getshopDate(e) {
				var login = uni.getStorageSync('login');
				if(login){
					this.is_preposition=true
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					goodDetails
						.goodDetails(e)
						.then(res => {
							 this.goodDetail = res.data;
						
							this.goodImag = this.goodDetail.imgs.map(v => {
								v = this.imgCDNUrl + v;
								return v;
							});
							console.log(this.goodImag[0])
							if (res.data.skus.length>0) {
								this.productImg = this.imgCDNUrl + this.goodDetail.skus[0].productImg;
							} else {
								
								this.productImg = this.goodImag[0];
							}
							this.disPrice=this.goodDetail.skus[0].marketPrice
							console.log(res.data,this.goodDetail.skus.length)
							uni.hideLoading();
							this.screen();
						})
						.catch(err => {
							console.log(err)
							console.log(new Error('请检查网络后重试'));
						});
				}else{
					uni.showModal({
						title: '提示',
						content: '登录以后才能加入购物车',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/shop/account/login'
								});
							} 
						}
					});
					return;
				}
				
			},
			screen() {
				var classify = [];
				var it1 = [],it2 = [];
				var da1 = this.goodDetail.skus;
				var da10 = [];
				for (var i = 0; i < da1.length; i++) {
					var da2 = da1[i].productSkuDesp;
					var da3 = da2.split(',');
			
					it1.push(da3[0].split(':')[1])
					it2.push(da3[1].split(':')[1])
			
					for (var j = 0; j < it1.length; j++) {
						if (da10.indexOf(it1[j]) === -1) {
							da10.push(it1[j])
						}
					}
					for (var k = 0; k < it2.length; k++) {
						if (classify.indexOf(it2[k]) === -1) {
							classify.push(it2[k])
						}
					}		
				}
				this.shop_details.push({
					size: classify,
					sublevel: da10
				});
				this.checked1 = this.shop_details[0].size[0]
				this.checked = this.shop_details[0].sublevel[0]
				this.indexs = 0
				this.idx = 0
			},
			
			sub() {
					uni.showLoading({
						title: '提交中',
						mask: true
					});
					var productId = '',
						skus = this.goodDetail.skus;
				
					for (var i = 0; i < skus.length; i++) {
						var size = skus[i].productSkuDesp.split(',')[1].split(':')[1]
						var color = skus[i].productSkuDesp.split(',')[0].split(':')[1]
						if (this.checked == color && this.checked1 == size) {
							
							productId = skus[i].id;
						}
					}

					var da = {
						productId: productId, // 货品id
						quantity: 1 // 货品数量
					};
					this.shopcart(da);
				
			},
			shopcart(da) {
				goodDetails
					.shopcart(da)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 2000
							});
							this.is_preposition=false
						} else {
							uni.showToast({
								title: '加入购物车失败',
								icon: 'none',
								duration: 2000
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						console.log(new Error('请检查网络后重试'));
					});
			},
			// 选择尺寸
			checkeds(e, ind) {
				this.indexs = ind
				this.checked = e
				this.goodDetail.skus.map(v=>{
					if(v.productSkuDesp.split(',')[0].split(':')[1] ==this.checked ){
						this.productImg = this.imgCDNUrl + v.productImg
						this.disPrice=v.marketPrice
					}
				})
			},
			// 选择颜色
			checkcolor(e, ind) {
				this.idx = ind
				this.checked1 = e
				this.goodDetails.skus.map(v=>{
					if(v.productSkuDesp.split(',')[1].split(':')[1] ==this.checked1 ){
						
						this.disPrice=v.marketPrice
					}
				})
			},
			// 计算距离顶部的高度，均分10等分，
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			ceng() {
				this.is_preposition = false;
				this.is_share = false;
			},
			go(url){
				console.log('aaa')
				window.location.href=url;
				// window.Location.href=url;
				// uni.navigateTo({
				// 	url:url,
				// })
			},
			subsite(item) {
				if(item.siteType==1){
					uni.navigateTo({
						url: './subsite?subsite='+JSON.stringify(item)
					});
				}else{
				
				/* 	uni.navigateTo({
						url: '/pages/shop/activity?subsite='+JSON.stringify(item)
					}); */
					this.commonality.route_balings('/pages/shop/activity',['partitionId','titleName'],[item.partitionId,item.siteName]);
				}
				
				
			},
			notice(e) {
				// this.commonality.route_baling('/pages/shop/news/news', 'shopnewsnews', e);
				 this.commonality.route_balings('/pages/shop/news/news',['shopnewsnews','title'],[e,'公告详情'])
			},
			go_news(e) {
				// this.commonality.route_baling('/pages/shop/news/news', 'shopnewsnews', e.id);
				this.commonality.route_balings('/pages/shop/news/news',['shopnewsnews','title'],[e.id,'新闻详情'])
			},
			go_morenews(e) {
				this.commonality.route_baling('/pages/shop/news/newslist', 'go_morenews', e);
			},
			go_message() {
				uni.navigateTo({
					url: '/pages/shop/news/msglist'
				});
			},
			changePage(current) {
				// console.log('当前轮播图序号为:' + current)
				// this.$refs.banner.refresh()    //重置轮播
			},
			clickHandler(item, index) {
				console.log(item, index);
			},
			go_good(e) {			    this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId', e);			   },
			   	// 更多热销商品信息
		go_goods() {
						this.commonality.route_balings('/pages/shop/commodity/list', ['partitionId','titleName'], [-1,'商品列表']);
       },
			go_goodsearch(e) {
				uni.navigateTo({
					url: '/pages/shop/commodity/find'
				});
			}
		}
	};
</script>

<style lang="less">
	.swiperheight{
		height: 240rpx;
		
	}
	.swiper{
		height: 420rpx;
	}
	.main {
		.status_bar {
			background: #bd3c8c;
		}

		.top {
			display: flex;
			padding: 10rpx 0;
			box-sizing: border-box;
			background: #bd3c8c;

			.scan,
			.msg {
				flex: 1;
				font-size: 16rpx;
				position: relative;

				image {
					padding: 7rpx 20rpx;
					width: 43rpx;
					height: 43rpx;
				}

				text {
					position: absolute;
					top: -3rpx;
					right: 6rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 30rpx;
					background: #fff;
					font-size: 24rpx;
					color: #ff2100;
				}
			}

			.input {
				width: 100%;
				font-size: 24rpx;
				border-radius: 58rpx;
				line-height: 58rpx;
				background: #fff;
				overflow: hidden;
				margin: 0 17rpx;
				text-align: center;
				color: #999999;

				image {
					width: 27rpx;
					height: 27rpx;
					position: relative;
					top: 4rpx;
				}
			}
		}

		.notice {
			display: flex;
			background: #fff;
			margin: 26rpx 0;
			align-items: baseline;
			.icon {
				margin: 0 15rpx 0 18rpx;

				image {
					width: 39rpx;
					height: 35rpx;
					
				}
			}

			.nr {
				flex: 1;
				color: #bd3c8c;
				font-size: 32rpx;
				overflow: hidden;
			}
		}

		.menu-bar {
			overflow: hidden;
		
			padding: 5rpx 20rpx 57rpx;
			margin-bottom: 26rpx;

			.menu {
				width: 47%;
				float: left;
				margin: 0 0 49rpx 1%;
				border-radius: 20rpx;
				height: 182rpx;
				position: relative;

				image {
					position: absolute;
					width: 83rpx;
					height: 83rpx;
					top: 43rpx;
					left: 30rpx;
				}

				view {
					position: absolute;
					top: 58rpx;
					left: 137rpx;
					margin-top: 0;
					color: #fff;
					font-size: 32rpx;

					text {
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 22rpx;
						font-size: 24rpx;
					}
				}
			}

			.menu:nth-child(2n) {
				margin-left: 4%;
			}

			.menu:nth-child(1) {
				background: linear-gradient(#fe8967, #f7a199);
			}

			.menu:nth-child(2) {
				background: linear-gradient(#ff96b9, #f26192);
			}

			.menu:nth-child(3) {
				background: linear-gradient(#c64ede, #d090dd);
			}

			.menu:nth-child(4) {
				background: linear-gradient(#f3cd67, #fdc01a);
			}
		}

		.product-list {
			background: #fff;
			padding: 14rpx 20rpx 0;
			

			.title {
				line-height: 100rpx;
				font-size: 30rpx;

				image {
					position: relative;
					width: 34rpx;
					height: 42rpx;
					top: 7rpx;
					margin-right: 16rpx;
				}

				.more {
					color: #999999;
					font-size: 26rpx;
				}
			}

			.list {
				padding: 10rpx;
				overflow: hidden;

				.commodity {
					width: 47%;
					float: left;
					overflow: hidden;
					box-shadow: 1rpx 2rpx 20rpx rgba(197, 197, 197, 0.35);
					border-radius: 20rpx;
					margin-bottom: 30rpx;

					.picture {
						width: 100%;
						height: 50vw;
					}

					.name {
						padding: 0 16rpx;
						height: 78rpx;
						font-size: 26rpx;
						margin-top: 20rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.price {
						padding: 0 16rpx;
						font-size: 32rpx;
						color: #bd3c8c;
						line-height: 86rpx;

						.shopping {
							position: relative;
							width: 44rpx;
							height: 40rpx;
							float: right;
							top: 18rpx;
						}
					}
				}

				.commodity:nth-child(2n) {
					margin-left: 6%;
				}
			}
		}

		.news {
			background: #fff;
			padding: 0 20rpx 14rpx;

			.title {
				margin-bottom: 30rpx;
				font-size: 30rpx;

				image {
					position: relative;
					width: 34rpx;
					top: 7rpx;
					margin-right: 16rpx;
				}

				.more {
					color: #999999;
					font-size: 26rpx;
				}
			}

			.list {
				white-space: nowrap;
				width: 100%;
				

				.new-list {
					width: 266rpx;
					display: inline-block;
					margin-right: 26rpx;
					

					image {
						width: 100%;
						height: 266rpx;
					}

					view {
						font-size: 32rpx;
						line-height: 80rpx;
						overflow: hidden;
						height: 80rpx;
						font-family: '黑体';
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.new-list:nth-last-child(1) {
					margin-right: 0;
				}
			}
		}

		.preposition {
			position: fixed;
			// #ifndef H5
			bottom: 0;
			// #endif
			// #ifdef H5
			bottom: 50px;
			// #endif
			width: 100%;
			background: #fff;
			z-index: 100;

			.intro {
				position: relative;
				display: flex;
				padding: 49rpx 20rpx;

				.img {
					margin-right: 30rpx;

					image {
						width: 211rpx;
						height: 211rpx;
					}
				}

				.text {
					padding-right: 65rpx;

					.name {
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.price {
						position: absolute;
						bottom: 49rpx;
						color: #bd3c8c;
						font-size: 36rpx;
					}

					.control {
						position: absolute;
						bottom: 40rpx;
						right: 20rpx;
						width: 200rpx;
						border: 1px solid #a0a0a0;
						/*no*/
						color: #d0d0d0;
						display: flex;
						text-align: center;
						line-height: 58rpx;
						border-radius: 30rpx;
						font-size: 32rpx;

						text {
							flex: 1;
						}

						text:nth-child(2) {
							color: #333;
							border-left: 1rpx solid #9b9b9b;
							border-right: 1rpx solid #9b9b9b;
						}
					}
				}

				.close {
					position: absolute;
					top: 40rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 1px solid #9b9b9b;
					/*no*/
					text-align: center;
					color: #9b9b9b;
					line-height: 40rpx;

					.uni-icons {
						position: absolute;
						left: 0;
						top: 0;
						font-size: 40rpx;
						
					}
				}
			}

			.parameter {
				padding: 0 20rpx;

				.ul {
					margin-bottom: 10rpx;
					margin-top: 20rpx;
					.p {
						font-size: 28rpx;
						line-height: 57rpx;
					}

					.li {
						display: inline-block;
						border-radius: 6rpx;
						padding: 19rpx 24rpx;
						border: 1px solid #efefef;
						/*no*/
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-size: 30rpx;
					}

					.li.active {
						background: #bd3c8c;
						color: #fff;
						border-color: #bd3c8c;
					}
				}

				.input {
					.inp {
						width: 100%;
						border: 1px solid #efefef;
						line-height: 80rpx;
						height: 80rpx;
						padding: 20rpx;
						margin: 20rpx 0;
						box-sizing: border-box;
						border-radius: 6rpx;
						font-size: 28rpx;
					}
				}
			}

			.button {
				margin: 80rpx 20rpx 20rpx;
				background: linear-gradient(80deg, #d2158a, #fc6395);
				text-align: center;
				line-height: 90rpx;
				font-size: 32rpx;
				color: #fff;
				border-radius: 45rpx;
			}
		}
	}
	.overflow{
		position: fixed;
		width: 100%;
	}
	swiper-item{
		font-size: 14px!important;
	}
</style>
